import React, { useEffect, useState } from 'react'
import { Header, RouterView } from 'src/components'
import { useHistory } from 'react-router-dom'
import { SAVE_QUESTION } from 'src/redux/action-type'
import { getService } from 'src/api/getData'
import { useDispatch } from 'react-redux'
import routerData from './routerData'
import './index.scss'

const Service = () => {
    const dispatch = useDispatch();
    const [serviceData, setServiceData] = useState()  //服务信息
    const [questionTitle, setQuestionTitle] = useState([])  //问题标题
    const [questionDetail, setQuestionDetail] = useState([])  //问题详情
    const history = useHistory()

    useEffect(() => {
        //获取信息
        const initData = async () => {
            let res = await getService();
            setServiceData(res)
            let questionTitleArr = [];
            let questionDetailArr = []
            Object.keys(res).forEach(item => {
                //防止重复的数据，后台返回的数据有些是重复的
                if (!questionTitleArr.includes(res.data[item])) {
                    if (item.includes('Caption')) {
                        //标题
                        questionTitleArr.push(res.data[item])
                    } else {
                        // 内容
                        questionDetailArr.push(res.data[item])
                    }
                }
            })
            setQuestionTitle(questionTitleArr)
            setQuestionDetail(questionDetailArr)
        }
        initData()
    }, [])

    //保存问题详情
    const toQuestionDetail = (title, index) => {
        dispatch({
            type: SAVE_QUESTION,
            question: {
                title: title,
                detail: questionDetail[index]
            }
        })
        history.push('/service/answer');
    }

    return <div className="page_service">
        <Header title="服务中心" goBack></Header>
        <section className="service_connect">
            <a href="https://ecs-im.ele.me/" className="service_left">
                <svg>
                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#human"></use>
                </svg>
                <span>在线客服</span>
            </a>
            <a href="tel:10105757" className="service_right">
                <svg>
                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#phone"></use>
                </svg>
                <span>在线客服</span>
            </a>
        </section>
        {
            serviceData && <section className="hot_questions">
                <h4 className="qustion_header">热门问题</h4>
                <ul>
                    {
                        questionTitle.map((item, index) => {
                            return <li key={index} className="question_title" onClick={() => toQuestionDetail(item, index)}>
                                <span>{item}</span>
                                <svg className="arrow-svg" fill="#999">
                                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                                </svg>
                            </li>
                        })
                    }
                </ul>
            </section>
        }
        <RouterView data={routerData} />
    </div>
}

export default Service

